<template>
  <div class="container-box">
    <div class="app-container role-container">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="14">
            <el-form-item label="logo图片" prop="configName">
              <img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" />
              <el-dialog :title="title" :visible.sync="open" width="800px">
                <el-row>
                  <el-col :xs="24" :md="12" :style="{ height: '350px' }">
                    <vue-cropper ref="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop"
                      :autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight"
                      :fixedBox="options.fixedBox" @realTime="realTime" />
                  </el-col>
                  <el-col :xs="24" :md="12" :style="{ height: '350px' }">
                    <div class="avatar-upload-preview">
                      <img :src="previews.url" :style="previews.img" />
                    </div>
                  </el-col>
                </el-row>
                <br />
                <el-row>
                  <el-col :lg="2" :md="2">
                    <el-upload :show-file-list="false" action="index" :before-upload="beforeUpload">
                      <el-button size="small">
                        上传
                        <i class="el-icon-upload el-icon--right"></i>
                      </el-button>
                    </el-upload>
                  </el-col>
                  <el-col :lg="{ span: 1, offset: 2 }" :md="2">
                    <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
                  </el-col>
                  <el-col :lg="{ span: 1, offset: 1 }" :md="2">
                    <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
                  </el-col>
                  <el-col :lg="{ span: 1, offset: 1 }" :md="2">
                    <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
                  </el-col>
                  <el-col :lg="{ span: 1, offset: 1 }" :md="2">
                    <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
                  </el-col>
                  <el-col :lg="{ span: 2, offset: 6 }" :md="2">
                    <el-button type="primary" size="small" @click="uploadImg()">上 传</el-button>
                  </el-col>
                </el-row>
              </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="平台名称" prop="platformName">
              <el-input v-model="form.platformName" placeholder="请输入平台名称" />
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="公司名称" prop="companyName">
              <el-input v-model="form.companyName" placeholder="请输入公司名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')">保 存</el-button>
        <el-button type="primary" @click="reset" :disabled="resectButton">还原默认</el-button>
      </div>
    </div>
    <div class="copyright">© 版权归 {{ copyright }} 所有</div>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";
import { getLogo, uploadLogo, saveLogo, resetLogo } from '@/api/system/style'
import logoImg from '@/assets/logo/logo.png'
export default {
  //刷新页面
  inject: ['reload'],
  components: { VueCropper },
  data() {
    return {
      //表单
      form: {
        logo: '',
        platformName: '',
        companyName: ""
      },
      // 是否显示弹出层
      open: false,
      title: "修改logo",
      resectButton: true,
      options: {
        img: logoImg, //裁剪图片的地址
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true // 固定截图框大小 不允许改变
      },
      // 表单校验
      rules: {
        platformName: [{ required: true, message: "平台名称不能为空", trigger: "blur" }],
        companyName: [{ required: true, message: "公司名称不能为空", trigger: "blur" }]
      },
      previews: {},
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      copyright: ''
    };
  },
  mounted() {
    this.copyright = sessionStorage.getItem('companyName')
  },
  created() {
    this.getLogo();
  },
  methods: {
    //回显
    getLogo() {
      getLogo().then(response => {
        if (response.code == 200 && !response.data) {
          this.form = {
            logo: logoImg,
            platformName: '晓予开发平台',
            companyName: 'HornIOT'
          }
          this.resectButton = true;
        } else {
          this.options.img = process.env.VUE_APP_BASE_HTTP + '/sys' + response.data.logo + "?timestamp=" + Date.parse(new Date());
          this.form = {
            logo: response.data.logo,
            platformName: response.data.platformName,
            companyName: response.data.companyName,
          }
          this.resectButton = false;
        }
      })
    },
    // 编辑头像
    editCropper() {
      this.open = true;
    },
    // 向左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    // 向右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    // 图片缩放
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.options.img = reader.result;
        };
      }
    },
    // 上传图片
    uploadImg() {
      this.$refs.cropper.getCropBlob(data => {
        let formData = new FormData();
        formData.append("logoFile", data);
        uploadLogo(formData).then(response => {
          if (response.code === 200) {
            this.open = false;
            this.form.logo = response.imgUrl
            this.msgSuccess("上传成功");
          } else {
            this.msgError(response.msg);
          }
          this.$refs.cropper.clearCrop();
        });
      });
    },
    // 实时预览
    realTime(data) {
      this.previews = data;
    },
    //样式保存
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.logo == '/static/img/logo.48a3a58d.png' || this.form.logo == 'static/img/logo.48a3a58d.png') {
            this.$message({
              type: 'warning',
              message: '请先上传logo'
            })
          } else {
            saveLogo(this.form).then(response => {
              if (response.code == 200) {
                this.reload();
                this.msgSuccess(response.msg)
              } else {
                this.msgError(response.msg)
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //还原默认

    reset() {
      resetLogo().then(response => {
        if (response.code == 200) {
          this.reload();
          this.msgSuccess(response.msg)
        } else {
          this.msgError(response.msg)
        }
      })
    },
    //
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1);
    },
    beforeAvatarUpload(file) {
      // console.log(file)
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form {
  padding-top: 20px;
}
</style>
